<template>
  <h2>ReadMore 显示更多</h2>
  <p>用于显示展开与折叠效果。有被 editor-content 与 table-fold 使用。</p>

  <h3>基本使用</h3>
  <!-- prettier-ignore -->
  <code-demo>
    <div style="border: 1px solid #eee">
      <p v-for="n in len" style="text-align: center">{{ n }}</p>
    </div>
    <read-more
      style="border: 1px solid #eee"
      moreText="显示全部后不再折叠"
      @toggle="(status) => (len = status === 'more' ? 5 : 10)"
    ></read-more>

    <template #code>
      {{ `
<template>
  <div style="border: 1px solid #eee">
    <p v-for="n in len" style="text-align: center">\{\{ n \}\}</p>
  </div>

  <read-more
    style="border: 1px solid #eee"
    @toggle="(status) => (len = status === 'more' ? 5 : 10)"
  ></read-more>
</template>

<script>
const len = ref(5)
</script>
      ` }}        
    </template>
  </code-demo>

  <h3>自定义按钮</h3>
  <!-- prettier-ignore -->
  <code-demo>
    <div style="border: 1px solid #eee">
      <p v-for="n in len2" style="text-align: center">{{ n }}</p>
    </div>

    <read-more
      showLess
      style="border: 1px solid #eee"
      @toggle="(status) => (len2 = status === 'more' ? 5 : 10)"
    >
      <template #more>
        <span>显示全部（10条）</span>
        <el-icon style="transform: rotate(90deg)"><DArrowRight /></el-icon>
      </template>
      <template #less>
        <span>折叠</span>
        <el-icon style="transform: rotate(-90deg)"><DArrowRight /></el-icon>
      </template>
    </read-more>

    <template #code>
      {{ `
<template>
  <div style="border: 1px solid #eee">
    <p v-for="n in len2" style="text-align: center">\{\{ n \}\}</p>
  </div>

  <read-more
    showLess
    style="border: 1px solid #eee"
    @toggle="(status) => (len2 = status === 'more' ? 5 : 10)"
  >
    <template #more>
      <span>显示全部（10条）</span>
      <el-icon style="transform: rotate(90deg)"><DArrowRight /></el-icon>
    </template>
    <template #less>
      <span>折叠</span>
      <el-icon style="transform: rotate(-90deg)"><DArrowRight /></el-icon>
    </template>
  </read-more>
</template>

<script>
const len2 = ref(5)
</script>
      ` }}        
    </template>
  </code-demo>

  <h3>Attributes</h3>
  <table-info type="props" :data="propsTable"></table-info>
  <h3>Events</h3>
  <table-info type="event" :data="eventTable"></table-info>
  <h3>Slots</h3>
  <table-info type="slot" :data="slotTable"></table-info>
</template>

<script setup>
import { ref } from 'vue'

// prettier-ignore
const propsTable = [
  { name: 'moreText', desc: '有更多内容时显示的文案', type: 'string', default: '显示全部' },
  { name: 'lessText', desc: '要折叠收起时显示的文案', type: 'string', default: '折叠' },
  { name: 'showLess', desc: '是否显示折叠按钮，默认不显示，展开后无折叠按钮', type: 'boolean', default: 'false' },
]

const eventTable = [
  {
    name: 'toggle',
    desc: '点击时触发，会切换折叠（less）与展开（more）状态。事件参数为当前折叠状态。',
    type: 'Function(status: ["more", "less"]) => void',
  },
]

const slotTable = [
  { name: 'more', desc: '有更多内容时的插槽。' },
  { name: 'less', desc: '要折叠收起时的插槽。' },
]

const len = ref(5)
const len2 = ref(5)
</script>
